<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/base-xwx.css"/>
    <link rel="stylesheet" href="css/stylesheet.css"/>
    <link type="image/x-icon" rel="shortcut icon" href="favicon.ico"/>
    <script src="js/jquery-1.12.4.js"></script>
    <script src ="js/animate-xwx.js"></script>
    <script src="js/common-xwx.js"></script>
    <script src="js/theIndex.js"></script>
</head>
<body>
<!--头部  开始-->
<div id="header">
    <div class="page-container">
        <div class="logo fl">
            <a href="index.html" class="hide-text">慕课网</a>
        </div>
        <div class="g-menu fl">
            <ul class="nav-item">
                <li><a href="#">课程</a></li>
                <li>
                    <a href="sz.html">
                        实战
                        <i class="icn-new"></i>
                    </a>

                </li>
                <li><a href="#">计划</a></li>
                <li><a href="#">猿问</a></li>
                <li><a href="#">手记</a></li>
            </ul>
        </div>
        <div class="login-area fr">
            <ul class="header-unlogin">
                <li id="show-erweima">
                    <a href="#">
                        <i class="sz-phone"><img src="images/sz/phone.png" alt=""/></i>
                    </a>
                    <div class="QR-download hidden">
                        <p>慕课网App下载</p>
                        <p id="app-type">iPhone / Android / iPad</p>
                        <img src="images/sz/qr-code.jpg" alt=""/>
                    </div>
                </li>
                <li class="login-in"><a href="#">登录</a></li>
                <li class="login-out" ><a href="#">注册</a></li>
            </ul>
        </div>
        <div class="search-wrap fr">
            <div class="search-area fl">
                <input type="text" placeholder="请输入想搜索的内容..."/>
            </div>
            <div class="showsearch-btn fl">
                <a href="#"><i id="sz-search">
                    <img src="images/sz/search.png" alt=""/>
                </i></a>
            </div>
        </div>
    </div>
</div>
<!--头部结束-->
<!--top banner begin-->
<div class="banner-bg ">
    <div class="banner-box banxin clearfix">
        <div class="pic-content">
            <div class="left-pic">
                <img src="images/sz/banner01.jpg" />
                <a href="coding.html"><img src="images/sz/banner03.jpg" /></a>
                <img src="images/sz/banner04.jpg" alt=""/>
            </div>
            <div class="right-pic">
                <img src="images/sz/banner02.jpg" alt=""/>
            </div>
        </div>

    </div>
</div>
<!--top banner end-->
<!--首发课程  开始-->
<div class="index-main banxin">
    <div class="index-list-wrap clearfix">
        <h2>首发课程</h2>
        <ul class="index-list clearfix">
            <li class="fl">
             <a href="#">
                <div class="top">
                    <img src="images/sz/576b84c10001b1c005400300-360-202%20.jpg" alt=""/>
                </div>
                <div class="bottom">
                    <h2>所向披靡的响应式开发</h2>
                    <p class="desc">忘记设备尺寸，一套代码适配多终端，响应式开发让用户体验和开发效率完美结合</p>
                    <div class="bottom-data">
                        <span class="price fl">
                            <i>￥</i>
                            <b>128.00</b>
                        </span>
                        <span class="member fr">122在线学习</span>
                    </div>
                </div>
             </a>
            </li>
            <li class="fl">
                <a href="#">
                    <div class="top">
                        <img src="images/sz/5763761f0001c35e05400300-360-202.jpg" alt=""/>
                    </div>
                    <div class="bottom">
                        <h2>打造扛得住的MySQL数据库架构</h2>
                        <p class="desc">面面俱到讲解影响MySQL性能的各个因素，让你将MySQL架构了然于胸。</p>
                        <div class="bottom-data">
                        <span class="price fl">
                            <i>￥</i>
                            <b>199.00</b>
                        </span>
                            <span class="member fr">126在线学习</span>
                        </div>
                    </div>
                </a>
            </li>
            <li class="fl">
                <a href="#">
                    <div class="top">
                        <img src="images/sz/576376440001766205400300-360-202.jpg" alt=""/>
                    </div>
                    <div class="bottom">
                        <h2>前端到后台ThinkPHP开发整站</h2>
                        <p class="desc">用PHP+MySQL+Ajax，页面静态化、数据库备份技术实现你“小全栈”梦想。 </p>
                        <div class="bottom-data">
                        <span class="price fl">
                            <i>￥</i>
                            <b>128.00</b>
                        </span>
                            <span class="member fr">577在线学习</span>
                        </div>
                    </div>
                </a>
            </li>
            <li class="fl">
                <a href="#">
                    <div class="top">
                        <img src="images/sz/576376520001da3d05400300-360-202.jpg" alt=""/>
                    </div>
                    <div class="bottom">
                        <h2>7天搞定Nodejs微信公众号开发</h2>
                        <p class="desc">用Koa框架、ES2015新特性及MongoDB数据库，开发微信公众号。</p>
                        <div class="bottom-data">
                        <span class="price fl">
                            <i>￥</i>
                            <b>199.00</b>
                        </span>
                            <span class="member fr">388在线学习</span>
                        </div>
                    </div>
                </a>
            </li>
            <li class="fl">
                <a href="#">
                    <div class="top">
                        <img src="images/sz/5763765d0001352105400300-360-202.jpg" alt=""/>
                    </div>
                    <div class="bottom">
                        <h2>用组件方式开发 Web App全站 </h2>
                        <p class="desc">用HTML5/CSS3/JS流行技术，以组件式开发WebApp全站。</p>
                        <div class="bottom-data">
                        <span class="price fl">
                            <i>￥</i>
                            <b>78.00</b>
                        </span>
                            <span class="member fr">713在线学习</span>
                        </div>
                    </div>
                </a>
            </li>
            <li class="fl">
                <a href="#">
                    <div class="top">
                        <img src="images/sz/5763766b0001fe1705400300-360-202.jpg " alt=""/>
                    </div>
                    <div class="bottom">
                        <h2>HTML5 移动Web App阅读器</h2>
                        <p class="desc">用HTML5、ES6、Ajax异步、Touch事件等技术，开发商业Web APP</p>
                        <div class="bottom-data">
                        <span class="price fl">
                            <i>￥</i>
                            <b>68.00</b>
                        </span>
                            <span class="member fr">951在线学习</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<!--首发课程  结束-->
<!--老师开始-->
<div class="index-teacher">
    <div class="index-main banxin">
        <div class="index-teacher-title">
            <h2>配得上大牛称号的讲师来教你</h2>
            <p>实战课讲师均来自阿里、百度、腾讯、京东、小米等一线互联网公司，<br>具有多年技术积淀及开发经验，手把手带你做真实项目，让你告别零项目经验。</p>
        </div>
        <ul class="star-item">
            <li class="fl">
                <span class="tc-1"></span>
                <div class="star-info">
                    <h3>Lyn</h3>
                    <p>百度前端工程师</p>
                    <span>追求代码界面的可扩展性、性能、设计和出色的用户体验，对代码复用、组件化有深入研究，是新技术追求者、代码极客、慕课网明星讲师。</span>
                    <div class="static"></div>
                </div>
            </li>
            <li class="fl">
                <span class="tc-2"></span>
                <div class="star-info">
                    <h3>猿人</h3>
                    <p>前端架构师</p>
                    <span>国内最早一批HTML5实践者，先后就职于腾讯、人人网、小米、美团。具有丰富的海量服务前端开发经验，在慕课网拥有近20万学员，是学生眼中的明星讲师。</span>
                    <div class="static"></div>
                    <div class="static"></div>
                </div>
            </li>
            <li class="fl">
                <span  class="tc-3"></span>
                <div class="star-info">
                    <h3>Scott</h3>
                    <p>nodejs技术专家</p>
                    <span>是国内最早接触 Node.js 的工程师，也是最早用 Node.js 做开发的工程师之一，拥有大量 Node.js 全站开发经验，是新技术的追求者和传播者，对于课程他认真细致，有着近乎完美的追求。</span>
                </div>
            </li>
            <li class="fl">
                <span  class="tc-4"></span>
                <div class="star-info">
                    <h3>Singwa</h3>
                    <p>PHP开发工程师</p>
                    <span>精通大数据、高并发处理核心技术，对大型网站架构有深入研究。曾在新浪视频负责PHP开发，CCTV6电影网项目经理，现在百度负责大数据流的开发。讲课风格激情澎湃，认真负责。</span>
                </div>
            </li>
        </ul>
    </div>

</div>
<!--老师结束-->
<!--轮播开始-->
<div class="index-classmate">
    <div class="index-main banxin">
        <h2>真实的项目开发经历，就是增加收入的凭证</h2>
        <p>无论职场工作还是求职路上，实战课所带给你的项目经验和前沿流行技术，让你比竞争者更有实际经验。</p>
    </div>
    <div class="scroll_div" id="scroll_div">
        <ul class="pic-content" id="pic_content">
            <li class="left">
                <img src="images/sz/56cec80e0001745301000100.jpg">
                <div class="user-content">
                    <h3>BlindLee</h3>
                    <div class="student-tag">来自
                        <a href="#" target="_blank">《7天搞定Nodejs微信公众号开发》</a>
                    </div>
                    <p>在nodeJS实战中遇到了许多小麻烦，但是通过回看视频，检查代码，答题区提问等方式都一一解决了，这不仅增加了自己的成就感，而且使自己对代码的理解更加透彻了，进一步强化了自己的语言基础和编程思想。另外还要对Scott老师点个赞，讲课风格风趣幽默，课后及时回答大家提的问题。这门实战课简直是物超所值！</p>
                </div>
            </li>
            <li class="left">
                <img src="images/sz/55c768d60001cea601000100.jpg">
                <div class="user-content">
                    <h3>木白121</h3>
                    <div class="student-tag">来自<a href="http://coding.imooc.com/class/48.html" target="_blank">《前端到后台ThinkPHP开发整站》</a></div>
                    <p>很郑重的说一声感谢，感谢慕课，更感谢singwa老师。从学习上对我的帮助。课程从项目的需求分析 一步一步开展，到数据表设计，再到项目实现，由浅入深，难点重点剖析。以上这些还不是主要。主要的是：老师的编程思想所彰显的是规范化，代码的重用性，还有在逻辑应该如何去考量业务的实现。这一点是我非常受益的。说实话 我是一名小白，这套课程，给我提升了一个等级。</p>
                </div>
            </li>
            <li class="left">
                <img src="images/sz/545850e10001f06002200220.jpg">
                <div class="user-content">
                    <h3>w7851435</h3>
                    <div class="student-tag">来自<a href="http://coding.imooc.com/class/15.html" target="_blank">《用组件方式开发 Web App全站》</a></div>
                    <p>老师讲的很专业，讲的过程很条理，几十块能听上百度大牛的课，太值了。</p>
                </div>
            </li>
            <li class="current">
                <img src="images/sz/533e4cc800016ffd02200220.jpg">
                <div class="user-content">
                    <h3>霸王龙只会php</h3>
                    <div class="student-tag">来自<a href="http://coding.imooc.com/class/13.html" target="_blank">《HTML5 移动Web App阅读器》</a></div>
                    <p>首先赞下慕课网和慕课网的老师，太棒了，这是我见过最好的学习方式了，一边看视频，一边还有IDE写代码功能。另外写代码时竟然可以2秒后自动报错，run的功能很强大，背后应该是个类似阿里云的主机，可以手机地址上看效果。</p>
                </div>
            </li>
            <li class="right">
                <img src="images/sz/55afdab10001cf4501000100.jpg">
                <div class="user-content">
                    <h3>龙晓秀</h3>
                    <div class="student-tag">来自<a href="http://coding.imooc.com/class/48.html " target="_blank">《前端到后台ThinkPHP开发整站》</a></div>
                    <p>我是一个新手程序员，但是看了老师的视频我学到了很多，也知道如何去学习和整理新学到的知识。 主要singwa老师还很耐心的给我一一解答我遇到的问题！ 感谢singwa 感谢慕课网 期待老师的新课！</p>
                </div>
            </li>
            <li class="right">
                <img src="images/sz/5333a2320001acdd02000200.jpg">
                <div class="user-content">
                    <h3>kevin_snow</h3>
                    <div class="student-tag">来自<a href="http://coding.imooc.com/class/38.html" target="_blank">《7天搞定Nodejs微信公众号开发 》</a></div>
                    <p>课程终于跟着完成了，一步一步过来，走过了很多的坑，scott幽默讲解，排解了代码调试的枯燥，但是一开始还是有很多对课程讲解不明白或对老师质疑的地方，把nodejs基本课程饿补了两个星期后，发觉还是以前的对nodejs基础不够扎实，总体感觉物有所值。</p>
                </div>
            </li>
            <li class="right">
                <img src="images/sz/548eafd70001ae7801000100.jpg">
                <div class="user-content">
                    <h3>Nichen</h3>
                    <div class="student-tag">来自<a href="http://coding.imooc.com/class/13.html" target="_blank">《HTML5 移动Web App阅读器》</a></div>
                    <p>我感觉,这个课程是针对的基础学员,从基础开始的,详细讲述一个webapp的开发过程,不过是一个简单的webapp的开发全过程,以及代码实战。</p>
                </div>
            </li>
        </ul>
        <a href="javascript:;" class="prve_l i_btn"></a>
        <a href="javascript:;" class="next_r i_btn"></a>

    </div>
</div>
<!--轮播结束-->
<!--底部开始-->
<div id="footer">
    <div class="waper">
        <div class="footerwaper clearfix">
            <div class="followus fr">
                <a class="followus-weixin" href="javascript:;" target="_blank" title="微信">
                    <div class="flw-weixin-box"></div>
                </a>
                <a class="followus-weibo" href="http://weibo.com/u/3306361973" target="_blank" title="新浪微博"></a>
                <a class="followus-qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间"></a>
            </div>
            <div class="footer_intro fl">
                <div class="footer_link">
                    <ul>
                        <li><a href="http://www.imooc.com/" target="_blank">网站首页</a></li>
                        <li><a href="http://www.imooc.com/about/job" target="_blank">人才招聘</a></li>
                        <li> <a href="http://www.imooc.com/about/contact" target="_blank">联系我们</a></li>
                        <li><a href="http://daxue.imooc.com/" target="_blank">慕课云</a></li>
                        <li><a href="http://www.imooc.com/about/us" target="_blank">关于我们</a></li>
                        <li> <a href="http://www.imooc.com/about/recruit" target="_blank">讲师招募</a></li>
                        <li> <a href="http://www.imooc.com/user/feedback" target="_blank">意见反馈</a></li>
                        <li> <a href="http://www.imooc.com/about/friendly" target="_blank">友情链接</a></li>
                    </ul>
                </div>
                <p>Copyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
            </div>
        </div>
    </div>
</div>
<!--底部结束-->

<!--小火箭开始-->
<div class="actGotop"><a href="javascript:;" title="Top"></a></div>
<script>
    $(function(){
        $(window).scroll(function() {
            if($(window).scrollTop() >= 300){ //向下滚动像素大于这个值时，即出现小火箭~
                $('.actGotop').fadeIn(300); //火箭淡入的时间，越小出现的越快~
            }else{
                $('.actGotop').fadeOut(300); //火箭淡出的时间，越小消失的越快~
            }
        });
        $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //火箭动画停留时间，越小消失的越快~
    });
</script>
<!--小火箭结束-->
</body>
</html>